<template>
  <el-card v-if="confs != null && confs.length > 0" header="控件配置">
    <el-form
      ref="controlEdit"
      :model="valueSet"
      label-width="180px"
    >
      <el-form-item
        v-for="item in confs"
        :key="item.Key"
        :label="item.Label"
        :prop="item.Key"
      >
        <el-input
          v-if="item.Type == 0"
          v-model="valueSet[item.Key]"
          :maxlength="50"
          :placeholder="item.Placeholder"
        />
        <treeDicItem
          v-else-if="item.Type == 1"
          v-model="valueSet[item.Key]"
          :dic-id="item.DicId"
          :placeholder="item.Placeholder"
        />
        <dictItem
          v-else-if="item.Type == 2"
          v-model="valueSet[item.Key]"
          :dic-id="item.DicId"
          :placeholder="item.Placeholder"
        />
        <el-switch v-else-if="item.Type == 3" v-model="valueSet[item.Key]" />
        <el-select
          v-else-if="item.Type == 4"
          v-model="valueSet[item.Key]"
          :placeholder="item.Placeholder"
        >
          <el-option
            v-for="op in item.Items"
            :key="op.Key"
            :value="op.Key"
            :label="op.Value"
          >{{ op.Value }}</el-option>
        </el-select>
        <span v-else-if="item.Type == 5">{{ valueSet[item.key] }}</span>
        <el-input-number
          v-else-if="item.Type == 6"
          v-model="valueSet[item.Key]"
          :precision="item.Precision ? item.Precision : 0"
          :placeholder="item.Placeholder"
        />
        <formColChiose v-else-if="item.Type == 7" v-model="valueSet[item.Key]" :form-id="curFormId" :clearable="true" />
        <div v-else-if="item.Type == 10">
          <el-select
            v-model="valueSet[item.Key]"
            :clearable="true"
            placeholder="请选择字典项"
          >
            <el-option v-for="k in dict.filter(a=>a.IsTreeDic == false)" :key="k.Id" :label="k.DicName" :value="k.Id">{{ k.DicName }}</el-option>
          </el-select>
        </div>
        <div v-else-if="item.Type == 11">
          <el-select
            v-model="valueSet[item.Key]"
            :clearable="true"
            placeholder="请选择字典项"
          >
            <el-option v-for="k in dict.filter(a=>a.IsTreeDic)" :key="k.Id" :label="k.DicName" :value="k.Id">{{ k.DicName }}</el-option>
          </el-select>
        </div>
        <div v-else-if="item.Type == 8">
          <el-select
            v-model="valueSet[item.Key]"
            :clearable="true"
            placeholder="请选择限定范围"
            @change="limitChange(item)"
          >
            <el-option label="无限制" :value="null">无限制</el-option>
            <el-option label="限定公司" value="company" />
            <el-option label="限定单位" value="unit" />
            <el-option label="限定部门" value="dept" />
          </el-select>
          <div v-if="valueSet[item.Key] == 'company'" style="margin-top: 10px">
            <companySelect v-model="valueSet['limitComId']" @change="limitChange(item)" />
          </div>
          <div v-else-if="valueSet[item.Key] == 'unit'" style="margin-top: 10px">
            <companySelect v-model="valueSet['limitComId']" />
            <deptSelect
              v-model="valueSet['limitUnitId']"
              style="margin-top: 10px"
              :is-unit="true"
              :company-id="valueSet['limitComId']"
              @change="limitChange(item)"
            />
          </div>
          <div v-else-if="valueSet[item.Key] == 'dept'" style="margin-top: 10px">
            <companySelect v-model="valueSet['limitComId']" />
            <deptSelect
              v-model="valueSet['limitDeptId']"
              style="margin-top: 10px"
              :is-chiose-unit="false"
              :company-id="valueSet['limitComId']"
              @change="limitChange(item)"
            />
          </div>
        </div>
        <div v-else-if="item.Type == 9" :key="ver">
          <el-row v-for="(t,i) in valueSet[item.Key]" :key="i" style="margin-top: 5px;">
            <el-col :span="8">
              <el-input v-model="t.text" placeholder="文本" @input="(val)=> refresh(val,t,'text')" />
            </el-col>
            <el-col :span="2" style="text-align: center;">:</el-col>
            <el-col :span="8">
              <el-input v-model="t.value" placeholder="值" @input="(val)=> refresh(val,t,'value')" />
            </el-col>
            <el-col :span="6" style="text-align: center;">
              <el-button v-if="i != 0 && valueSet[item.Key].length != 1" type="text" icon="el-icon-top" @click="upItem(item,i)" />
              <el-button v-if="(i+1) != valueSet[item.Key].length && valueSet[item.Key].length != 1" type="text" icon="el-icon-bottom" @click="downItem(item,i)" />
              <el-button type="text" icon="el-icon-delete" @click="dropItem(item,i)" />
            </el-col>
          </el-row>
          <el-button icon="el-icon-plus" type="success" style="width: 100%; margin-top: 5px;" @click="addItem(item)" />
        </div>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { GetItems } from '@/api/base/dict'
import { ControlType } from '@/customForm/config/formConfig'
import companySelect from '@/components/company/companySelect.vue'
import deptSelect from '@/components/unit/deptSelect.vue'
import formColChiose from '@/customForm/components/form/formColChiose.vue'
export default {
  components: {
    companySelect,
    deptSelect,
    formColChiose
  },
  props: {
    configs: {
      type: Array,
      default: null
    },
    formId: {
      type: String,
      default: null
    },
    controlSet: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      columns: [],
      valueSet: {},
      curFormId: [],
      dict: [],
      ver: 1,
      confs: [],
      companyId: null
    }
  },
  watch: {
    configs: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    },
    formId: {
      handler(val) {
        if (val) {
          this.curFormId = [val]
        } else {
          this.curFormId = []
        }
      },
      immediate: true
    },
    controlSet: {
      handler(val) {
        if (val && this.configs != null) {
          this.resetValue()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    addItem(item) {
      this.valueSet[item.Key].push({
        text: null,
        value: null
      })
      this.ver = this.ver + 1
    },
    async loadDic() {
      this.dict = await GetItems()
    },
    refresh(val, obj, key) {
      obj[key] = val
      this.ver = this.ver + 1
    },
    upItem(item, index) {
      const arr = this.valueSet[item.Key]
      const t = arr[index]
      arr[index] = arr[index - 1]
      arr[index - 1] = t
      this.valueSet[item.Key] = arr.concat()
    },
    downItem(item, index) {
      const arr = this.valueSet[item.Key]
      const t = arr[index]
      arr[index] = arr[index + 1]
      arr[index + 1] = t
      this.valueSet[item.Key] = arr.concat()
    },
    dropItem(item, index) {
      this.valueSet[item.Key].splice(index, 1)
      this.ver = this.ver + 1
    },
    resetValue() {
      const obj = this.controlSet == null ? {} : this.controlSet
      this.configs.forEach(c => {
        if (c.Key in obj === false) {
          if (c.Type === 3) {
            obj[c.Key] = c.DefValue ? c.DefValue === 'true' : false
          } else {
            obj[c.Key] = c.DefValue ? c.DefValue : null
          }
        }
        if (c.Type === ControlType.dept.value) {
          if ('limitComId' in obj === false) {
            obj['limitComId'] = null
          }
          if ('limitDeptId' in obj === false) {
            obj['limitDeptId'] = null
          }
          if ('limitUnitId' in obj === false) {
            obj['limitUnitId'] = null
          }
        }
        if (c.Type === 9 && obj[c.Key] == null) {
          obj[c.Key] = []
        }
      })
      this.valueSet = obj
      this.confs = this.configs
    },
    reset() {
      if (this.configs.findIndex((a) => a.Type === 10 || a.Type === 11) !== -1) {
        this.loadDic()
      }
      this.resetValue()
    },
    getValue() {
      if (this.valueSet.min === 0) {
        delete this.valueSet.min
      }
      if (this.valueSet.max === 0) {
        delete this.valueSet.max
      }
      return this.valueSet
    },
    limitChange(item) {
      if (this.valueSet[item.Key] === 'dept') {
        this.valueSet['limitUnitId'] = null
      } else if (this.valueSet[item.Key] === 'unit') {
        this.valueSet['limitDeptId'] = null
      } else {
        this.valueSet['limitDeptId'] = null
        this.valueSet['limitUnitId'] = null
      }
    }
  }
}
</script>
<style scoped>
.el-cascader {
  width: 100%;
}
</style>
